<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>沙河乡村</title>
		<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

		<!-- Swiper JS -->
		<script src="./static/js/swiper.min.js"></script>
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
		<!-- Link Swiper's CSS -->
		<link rel="stylesheet" href="./static/css/swiper.min.css">
		<meta name="format-detection" content="telephone=no">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<link rel="alternate icon" type="image/png" href="assets/i/favicon.png">

		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
		 crossorigin="anonymous"></script>
		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
		 crossorigin="anonymous">
		<style>
			* {
				box-sizing: border-box;
				font-size: 0.99em;
			}
			a{
			text-decoration:none;
			color:#333;
			}

			body {
				margin: 0;
				font-family: 微软雅黑;
			}

		
		header {
			padding-top: 0.4em;
			height: 2.1em;
			/* line-height: 2.1em width: 100%; */
			color: #fff;
			/* font-weight: 600; */
			font-size: 0.95em;
			/*背景色渐变*/
			background: linear-gradient(to bottom right, #e51a14, #e51a14);
		}
			#content {
				/* background: linear-gradient(to bottom right, #f5f454, #fbd1b7); */
			}

			.menu {
				display: block;
				position: fixed;
				bottom: 0;
				width: 100%;
				height: 3.8em;
				color: #474747;
				padding-top: 10px;
				border-top: 1px solid #eee;
				background-color: #fff;
			}

			.subMenu {
				width: 20%;
				float: left;
				cursor: pointer;
			}

			.menu_name {
				height: 1.2em;
				width: 100%;
				line-height:  1.2em;
				font-size: 0.8em;
			}

			img.menu_img {
				height: 24px;
				width: 24px;
			}

				img {
					vertical-align: middle;
					border: 0;
				}
				.text-center {
					text-align: center
				}
		</style>

	</head>
	<body>
	<header class="text-center">
		<div class="container-fluid">
		  <div class="row">
			<div class="col-xs-3 col-md-1"><span>王小名</span>
				<span><img src="" alt=""></span></div>
		     <div class="col-xs-6 col-md-8">乡村系统</div>
		    <div class="col-xs-3  col-md-1"><a style="color: #FFFFFF;" href="login.html"><span>退出</span></a></div>
		  </div>
		</div>
	</header>
		<style>


.news {
    background: #fff;
	padding-left: 0.5em;
}

.news .list {
    display: flex;
    display: -webkit-flex;
    padding: 10px 5px 5px;
    margin: 0 15px;
    border-bottom: 1px solid #ddd;
}

.news .list:last-child {
    border: 0;
}

/* 无图纯文字模式 */
.list-no-img {
    flex-direction: column;
}
.list-no-img .top .title {
    font-weight: bold;
    height: 30%;
    font-size: 14px;
}
.list-no-img .top .content {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    line-height: 20px;
    font-size: 14px;
    margin-bottom: 5px;
    color: #666;
    margin: 5px 0;
}

.list-no-img .info {
    font-size: 10px;
    color: #bbb;
    display: flex;
}
.list-no-img .info .info-r-5 {
    margin-right: 5px;
}
.list-no-img .info .list-ellipsis-1 {
    max-width: 40%;
}

/* 无图纯文字模式结束 */


/* 右图模式 */

.list-right-img .left {
    width: 60%;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: space-between;
}

.list-right-img .left .title {
    font-weight: bold;
    height: 30%;
    font-size: 14px;
}

.list-right-img .left .content {
    font-size: 12px;
    color: #888;
    margin: 5px 0;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-height: 16px;
}

.list-right-img .left .time {
    font-size: 10px;
    color: #bbb;
}

.list-right-img .right {
    width: 40%;
    margin-left: 10px;
}

.list-right-img .right img {
    width: 100%;
    height: 80px;
}

/* 右图模式结束 */


/* 下三图模式 */
.list-bottom-tri {
    flex-direction: column;
}
.list-bottom-tri .title {
    font-weight: bold;
    height: 30%;
    font-size: 14px;
}
.list-bottom-tri .img-wrap {
    display: flex;
    margin: 5px 0;
}
.list-bottom-tri .img-wrap img{
    width: 100%;
    height: 80px;
}
.list-bottom-tri .info {
    font-size: 10px;
    color: #bbb;
    display: flex;
}
.list-bottom-tri .info .info-r-5 {
    margin-right: 5px;
}
.list-bottom-tri .info .list-ellipsis-1 {
    max-width: 40%;
}
/* 下三图模式结束 */

/* 其他 */

/* 单行省略 */
.list-ellipsis-1 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 两行省略 */
.list-ellipsis-2{
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* 平分3个 */
.list-col-xs-4 {
    width: 33.333%;
    padding: 0 2px;
}

		</style>
		<div id="content">
			<!-- Demo styles -->
			<style>
				.headlunbo {
				
					width: 100%;
					background-color: #007AFF;
				}

				.swiper-container {
					width: 100%;
					height: 100%;
					margin: auto;
				}

				.swiper-slide {
					text-align: center;
					font-size: 18px;
					background: #fff;
					/* Center slide text vertically */
					display: -webkit-box;
					display: -ms-flexbox;
					display: -webkit-flex;
					display: flex;
					-webkit-box-pack: center;
					-ms-flex-pack: center;
					-webkit-justify-content: center;
					justify-content: center;
					-webkit-box-align: center;
					-ms-flex-align: center;
					-webkit-align-items: center;
					align-items: center;
				}

				.img_b {
					width: 100%;
					height: 100%;
				}

				.tabbable {
					line-height: 1.2em;
					padding-top: 0em;
				}

				.tab_t {
					font-weight: 600;
					font-size: 1.2em;
					margin-top: 0.7em;
					margin-left: 1.2em;
					padding-bottom: 0.6em;
				}

				.pa_t {
					position: relative;
				}

				.pa_t>li {
					width: 7em;
					/* background-color: #007AFF; */

				}

				.tab_t>a {
					color: #343434 !important;
					;
					text-decoration: none;
				}

				.active {
					/* color: #43a1f8 !important; */
					/* border-bottom: 0.2px solid #007AFF;
					 /* background-color: #4ea2f2; */
				
				  
				}

				.active::after {
					content: '';
					width: 20%;
					display: block;
					margin: 0 auto;
					border-bottom: 0.3em solid #007AFF;
				}

				.active2::after {
					border-bottom: 0em solid #007AFF;
				}
			</style>
			<div class="headlunbo">
				<!-- Swiper -->
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<img class="img_b" src="./static/img/c4.png" alt="">
						</div>
						<div class="swiper-slide">
							<img class="img_b" src="./static/img/c4.png" alt="">
						</div>
						<div class="swiper-slide">
							<img class="img_b" src="./static/img/c4.png" alt="">
						</div>
					</div>
					<!-- Add Pagination -->
					<div class="swiper-pagination"></div>
				</div>
			</div>

			<div class="content-news">
				<ul class="news">
					<li class="list list-right-img">
						<div class="left">
							<div class="new">
								<p class="title list-ellipsis-1">这是风水堪舆这是风水堪舆这是风水堪舆这是风水堪舆这是风水堪舆这是风水堪舆</p>
								<p class="content">堪舆术，即相地术，俗称风水术，它是一门历史悠久的玄术。属于占相阳宅（生人住宅）和阴宅（死者墓葬）的地形、环境、结构、坐向以测断吉凶休咎的方术。 堪舆术是对宅地或墓地的地脉、山形、水流及坐向的统称。术家认为，不论阳宅阴宅，风水的好坏，均关乎生人的吉凶休咎。现存最早出现“风水”一词的文献为旧题晋郭璞撰的《葬书》：“《经》云：‘气乘风则散，界水则止。’古人聚之使不散，行之使有止，故谓之‘风水’。</p>
							</div>
							<span class="time">2018-10-22</span>
						</div>
						<div class="right">
							<img src="static/img/11.jpg" alt="">
						</div>
					</li>
					<li class="list list-right-img">
						<div class="left">
							<div class="new">
								<p class="title list-ellipsis-1">这是风水堪舆这是风水堪舆这是风水堪舆这是风水堪舆这是风水堪舆这是风水堪舆</p>
								<p class="content">堪舆术，即相地术，俗称风水术，它是一门历史悠久的玄术。属于占相阳宅（生人住宅）和阴宅（死者墓葬）的地形、环境、结构、坐向以测断吉凶休咎的方术。 堪舆术是对宅地或墓地的地脉、山形、水流及坐向的统称。术家认为，不论阳宅阴宅，风水的好坏，均关乎生人的吉凶休咎。现存最早出现“风水”一词的文献为旧题晋郭璞撰的《葬书》：“《经》云：‘气乘风则散，界水则止。’古人聚之使不散，行之使有止，故谓之‘风水’。</p>
							</div>
							<span class="time">2018-10-22</span>
						</div>
						<div class="right">
							<img src="static/img/11.jpg" alt="">
						</div>
					</li>
					<li class="list list-right-img">
						<div class="left">
							<div class="new">
								<p class="title list-ellipsis-1">这是风水堪舆这是风水堪舆这是风水堪舆这是风水堪舆这是风水堪舆这是风水堪舆</p>
								<p class="content">堪舆术，即相地术，俗称风水术，它是一门历史悠久的玄术。属于占相阳宅（生人住宅）和阴宅（死者墓葬）的地形、环境、结构、坐向以测断吉凶休咎的方术。 堪舆术是对宅地或墓地的地脉、山形、水流及坐向的统称。术家认为，不论阳宅阴宅，风水的好坏，均关乎生人的吉凶休咎。现存最早出现“风水”一词的文献为旧题晋郭璞撰的《葬书》：“《经》云：‘气乘风则散，界水则止。’古人聚之使不散，行之使有止，故谓之‘风水’。</p>
							</div>
							<span class="time">2018-10-22</span>
						</div>
						<div class="right">
							<img src="static/img/11.jpg" alt="">
						</div>
					</li>
					<li class="list list-right-img">
						<div class="left">
							<div class="new">
								<p class="title list-ellipsis-1">这是风水堪舆这是风水堪舆这是风水堪舆这是风水堪舆这是风水堪舆这是风水堪舆</p>
								<p class="content">堪舆术，即相地术，俗称风水术，它是一门历史悠久的玄术。属于占相阳宅（生人住宅）和阴宅（死者墓葬）的地形、环境、结构、坐向以测断吉凶休咎的方术。 堪舆术是对宅地或墓地的地脉、山形、水流及坐向的统称。术家认为，不论阳宅阴宅，风水的好坏，均关乎生人的吉凶休咎。现存最早出现“风水”一词的文献为旧题晋郭璞撰的《葬书》：“《经》云：‘气乘风则散，界水则止。’古人聚之使不散，行之使有止，故谓之‘风水’。</p>
							</div>
							<span class="time">2018-10-22</span>
						</div>
						<div class="right">
							<img src="static/img/11.jpg" alt="">
						</div>
					</li>
					<li class="list list-right-img">
						<div class="left">
							<div class="new">
								<p class="title list-ellipsis-1">这是风水堪舆</p>
								<p class="content">风水之法，得水为上，藏风次之。”后世术家兼作“堪舆”的代称，相宅、相墓之法，辨证研究风水，去其糟粕，取其精华，用科学合理的方法来解释风水现象，只可用于趋吉避凶，不可痴迷其中。</p>
							</div>
							<span class="time">2018-10-22</span>
						</div>
						<div class="right">
							<img src="static/img/12.jpg" alt="">
						</div>
					</li>
					<li class="list list-bottom-tri">
						<div class="top">
							<div class="title list-ellipsis-2">文章标题文章标题文章标题</div>
							<div class="img-wrap">
								<div class="list-col-xs-4"><img src="static/img/12.jpg" alt=""></div>
								<div class="list-col-xs-4"><img src="static/img/12.jpg" alt=""></div>
								<div class="list-col-xs-4"><img src="static/img/12.jpg" alt=""></div>
							</div>
						</div>
						<div class="info">
							<!-- <span class="info-r-5 list-ellipsis-1">崇道新闻崇道新闻崇道新闻崇道新闻崇道新闻崇道新闻</span>
							<span class="info-r-5">99评价</span> -->
							<span class="">2018-10-25 10:35</span>
						</div>
					</li>
					<li class="list list-no-img">
						<div class="top">
							<div class="title list-ellipsis-2">道教认为人死之后会发生什么？</div>
							<p class="content">
									崇道人：“早期的道其形骸，考其魂神。善者有赏， 可上升受天之衣食，恶者受罚，谪作河梁山海之鬼。崇道人：“早期的道其形骸，考其魂神。善者有赏， 可上升受天之衣食，恶者受罚，谪作河梁山海之鬼。
							</p>
						</div>
						<div class="info">
							<span class="">2018-10-25 10:35</span>
						</div>
					</li>
				</ul>
			

			</div>

		</div>

		<div id="menu" class="menu">
			
				
			
			<div id="one" class="subMenu text-center" data-src="shouye.html"><a href="index.html">
				<img class="menu_img" src="static/img/hm.svg">
				<div class="menu_name"><span style="">首页</span></div></a>
			</div>
			<div id="two" class="subMenu text-center" data-src="liebiao.html">
				<!-- <img class="menu_img" src="static/img/qz.svg"> -->
				<img class="menu_img" src="static/img/shequ.svg">

				<div class="menu_name"><span style="color: #ef8329;">新闻</span></div>
			</div>
			<style type="text/css">
				#three{
					width: 4em;
					height: 4em;
					background-color: #FFFFFF;
					/* position: fixed;
					bottom: 2em !important; */
				}
				#three_2{
					width: 4em;
					height: 4em;
					
					position: fixed;
					bottom: 1em !important;
					margin-left: 40%;
					border-radius: 2em;
				}
				#three_2>img{
					width: 3.5em;
					height:3.5em;
				}
			</style>
			<div id="three" class="subMenu text-center" data-src="fabu.html">
				<img class="menu_img" src="static/img/addbai.svg">
				<div class="menu_name">发布 </div>
			</div>
			<div id="three_2" class="subMenu text-center" data-src="fabu.html">
				<img class="menu_img" src="static/img/add.svg">
				<!-- <div class="menu_name">发布 </div> -->
			</div>
			<div id="four" class="subMenu text-center" data-src="qz.html">
				<a href="xinxi.html">
				<img class="menu_img" src="static/img/sy.svg">
				<div class="menu_name">信息</div>
				</a>
			</div>
			<div id="five" class="subMenu text-center" data-src="wd.html">
				<a href="my_2.html">
				<img class="menu_img" src="static/img/my.svg">
				<div class="menu_name">我的</div>
				</a>
			</div>
			</div>

		

	</body>
</html>
<!-- Initialize Swiper -->
<script>
	var swiper = new Swiper('.swiper-container', {
		pagination: '.swiper-pagination',
		paginationClickable: true,
		loop: true, // 循环模式选项
		autoHeight: true
	});
</script>	
<script>
				$(document).ready(function() {
					
				});

				/*content高度*/
				function initSize() {
					var height = $(window).height() - $("header").height() - $("#description").height() - $("#menu").height();
					$("#content").height(height + "px");
				}
			</script>